<template>
  <div class="closeGoogleBinding">
    <!--谷歌验证码-->
    <div class="list">
      <ul>
        <li>
          <label v-show="AreaCodeData">{{lang['smsAuthenticationCode']}}</label>
          <label v-show="!AreaCodeData">{{lang['mailboxVerificationCode']}}</label>
          <input type="text" name="" maxlength="6" value="" class="inptYz" v-model="googlepin" :placeholder="lang['register_PleaseerificationCode']" >
          <a class="countryAreaNo">
            <span v-if="sendMsgDisabled" style="color:rgba(255,255,255,.7)">{{lang['register_ClickGett']}}({{time}})</span>
            <span v-if="!sendMsgDisabled" v-bind:class="{colorActive: !isSendSMS}"  @click="sendphone">{{lang['register_ClickGet']}}</span>
          </a>
        </li>
        <li>
          <label>{{lang['basic_capitalPassword']}}</label>
          <input type="password" name="" value="" v-model="googletpwd" maxlength="6" :placeholder="lang['pleaseEnterAFundPassword']">
        </li>
        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }"  @click="googleShow">{{lang['Turn off google validation']}}</button>
        </li>
      </ul>
    </div>

    <!-- 弹窗 提示-->
    <SwModal :isShow.sync="showModal" modalClass="userModal smallModal" :onClosed="onClosed" :isCloseOnClickBg="true" :okText="lang['determineBth']"  :ok="googleBtndetermine">
        <div class="successfulOperation">
          <img src="../images/google_certification02.png" width="50">
          <p>{{lang['successfulCloseGoogle']}}</p>
        </div>
    </SwModal>

  </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'

export default {
  props: [
    'lang',
    'langKey',
    'getCustomer'
  ],
  data () {
    return {
      showModal: false,
      googlepin: '',
      googletpwd: '',
      time: 60,
      sendMsgDisabled: false,
      phone_emali: '',
      AreaCodeData: '',
      sendCodeulr: '',
      isSendSMS: true,
      isSubmitBtnCheck: true
    }
  },
  components: {
    SwModal
  },
  methods: {
    // 发送验证码
    sendphone () {
      if (!this.isSendSMS) { return }

      if (this.AreaCodeData) {
        this.sendCodeulr = 'Security/SendSmsByCode'
      } else {
        this.sendCodeulr = 'Security/SendMailByCode'
      }

      this.isSendSMS = false
      this.$http.post(this.sendCodeulr, {
        AreaCode: this.AreaCodeData,
        VerifyDeviceType: 0,
        VerifyCode: '',
        PhoneOrEmail: this.phone_emali,
        BussinessType: 21,
        LanguageCode: this.langKey
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          // // 倒计时
          let me = this
          me.sendMsgDisabled = true
          let interval = window.setInterval(() => {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
          }, 1000)
          // // 倒计时
        }
        this.isSendSMS = true
      })
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.googleShow()
      }
    },
    googleShow () {
      if (!this.isSubmitBtnCheck) { return }

      if (!this.googlepin) {
        ModalApi.message(this.lang['register_PleaseerificationCode'], '', '', 'userModal') // '请输入验证码'
        return
      }

      if (!this.googletpwd) {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], '', '', 'userModal') // '请输入PIN'
        return
      }

      this.isSubmitBtnCheck = false
      this.$http.post('Security/UnBindGoogleTFAAuthenticByCode', {
        pin: this.googlepin, // 验证码
        tpwd: this.googletpwd  // 资金密码
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.googlepin = ''
          this.googletpwd = ''
          this.sendMsgDisabled = false
          this.showModal = !this.showModal
        }
        this.isSubmitBtnCheck = true
      })
    },
    googleBtndetermine () {
      this.showModal = false
      this.$emit('GetCustomerList')
    },
    onClosed () {

    }
  },
  watch: {
    getCustomer () {
      if (this.getCustomer.Phone) {
        this.phone_emali = this.getCustomer.Phone
        this.AreaCodeData = this.getCustomer.AreaCode.substring(1)
      } else {
        this.phone_emali = this.getCustomer.Email
        this.AreaCodeData = ''
      }
    }
  },
  mounted () {

  }
}
</script>

<style lang="less">

.closeGoogleBinding {
  background: #1A1F2B;
  padding-bottom: 20px;

  .list {
    width: 420px;
    margin: 0 auto;
  }

  .list li {
    position: relative;
  }

  .list li .tip {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    top: 68px;
    left:0;
    color: #fff;
  }

  .list li label {
    display: block;
    padding: 15px 10px 5px;
    height: 20px;
    line-height: 20px;
    color: #fff;
  }

  .list li input {
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #2A3440;
    color: #fff;
  }

  .list  li  .inptYz{
    padding-right: 120px;
  }

  .list  li .countryAreaNo {
      position: absolute;
      top: 40px;
      right: 0;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
  }

  .list  li .countryAreaNo span{
    display: block;
  }
  .list  li .countryAreaNo span.colorActive{
    color:#ccc;
  }

  .list  li .countryAreaNo:after{
    position: absolute;
    left: 0;
    top:10px;
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    border-left: solid 1px #B1BBC2;
  }

  .list li .submitBtn {
    width: 50%;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 0;
    text-align: center;
    background: #3782FF;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .list li .submitBtn.active{
    background-color: #2A3441;
    cursor:not-allowed;
  }
}

</style>
